<template>
  <view class="container">
    <view class="search-box">
      <input type="text" placeholder="输入会员卡号" class="search-input" v-model="card_number" />
      <button class="search-button" size="mini" @click="search">搜索会员</button>
    </view>
    <view class="order-list">
      <uni-table :border="true">
        <uni-tr>
          <uni-th>打印</uni-th>
          <uni-th>会员姓名</uni-th>
          <uni-th>单据号</uni-th>
          <uni-th>消费时间</uni-th>
          <uni-th>单据类型</uni-th>
          <uni-th>会员卡号</uni-th>
          <uni-th>消费金额</uni-th>
          <uni-th>实收</uni-th>
          <uni-th>操作员</uni-th>
          <uni-th>备注</uni-th>
        </uni-tr>
        <uni-tr v-for="order in orders" :key="order.id">
          <uni-td>
            <uni-button type="primary" size="mini" @click="viewDetails(order.id)" style="margin-right: 16px;">详情</uni-button>
            <uni-button type="warn" size="mini" @click="viewChufangDetails(order.id)">处方</uni-button>
          </uni-td>
          <uni-td>{{ order.member_name }}</uni-td>
          <uni-td>{{ order.order_number }}</uni-td>
          <uni-td>{{ order.order_time }}</uni-td>
          <uni-td>{{ order.order_type }}</uni-td>
          <uni-td>{{ order.member_card }}</uni-td>
          <uni-td>{{ order.total_amount }}</uni-td>
          <uni-td>{{ order.received_amount }}</uni-td>
          <uni-td>{{ order.operator }}</uni-td>
          <uni-td>{{ order.note }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="pagination">
      <uni-pagination :total="totalOrders" :page-size="pageSize" :current="currentPage" @change="onPageChange"></uni-pagination>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card_number: "",
      orders: [],
      totalOrders: 0,
      pageSize: 10,
      currentPage: 1,
      userInfo: {}
    };
  },
  methods: {
    async search() {
      try {
        const res = await this.$myRuquest({
          url: '/index/plugin.foreground/getOrders',
          method: 'GET',
          data: {
            card_number: this.card_number,
            shop_id: this.userInfo.shop_id,
            page: this.currentPage,
            page_size: this.pageSize
          }
        });

        if (res.data.code === 200) {
          this.orders = res.data.data.orders;
          this.totalOrders = res.data.data.total_orders;
        } else {
          uni.showToast({
            title: res.data.info,
            duration: 2000,
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '获取订单失败',
          duration: 2000,
          icon: 'none'
        });
      }
    },
    onPageChange(event) {
      this.currentPage = event.current;
      this.search();
    },
    viewDetails(orderId) {
      // 跳转到订单详情页面
      uni.navigateTo({
        url: `/pages/front_end/dayin?order_id=${orderId}`
      });
    },
    viewChufangDetails(orderId) {
      // 跳转到订单详情页面
      uni.navigateTo({
        url: `/pages/front_end/dayin_chufang?order_id=${orderId}`
      });
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
      } else {
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    }
  },
  mounted() {
    this.checkLoginStatus();
    this.search();
  }
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #fff;
}

.search-box {
  display: flex;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-button {
  background-color: #4cd964;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
}

.search-button:hover {
  background-color: #45c853;
}

.order-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

uni-table {
  width: 100%;
  border-collapse: collapse;
}

uni-th, uni-td {
  padding: 10px;
  border: 1px solid #ddd;
}

uni-th {
  background-color: #f9f9f9;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
